<template>
  <div>

    起<el-date-picker
      v-model="startDate"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期时间"
    />
    止<el-date-picker
      v-model="endDate"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期时间"
    />
    <el-button type="primary" @click="search">搜索</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="upLabel" name="up" />
      <el-tab-pane v-if="downShow" :label="downLabel" name="down" />
    </el-tabs>

    <el-table
      :data="tableData"
      border
      class="table"
      header-cell-class-name="table-header"
    >

      <el-table-column prop="timestamp" label="时间" align="center" width="200" />
      <el-table-column
        v-if="funcType == 'SERVICE' || (funcType == 'PROP' && activeName == 'down')"
        prop="messageId"
        label="下发ID"
        align="center"
      />
      <el-table-column prop="request" label="值" align="center" :formatter="formatValue" />

      <el-table-column
        v-if="funcType == 'SERVICE' || (funcType == 'PROP' && activeName == 'down')"
        prop="status"
        label="设备响应状态"
        align="center"
        :formatter="formatStatus"
      />
      <el-table-column
        v-if="funcType == 'SERVICE' || (funcType == 'PROP' && activeName == 'down')"
        prop="replyMessage"
        label="设备响应"
        align="center"
        :formatter="formatReply"
      />
      <el-table-column
        v-if="funcType == 'SERVICE' || (funcType == 'PROP' && activeName == 'down')"
        prop="replyTime"
        label="响应时间"
        align="center"
        width="200"
      />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="viewDetail(scope.$index, scope.row)"
          >查看
          </el-button>
          <el-button
            v-if="funcType == 'SERVICE' || (funcType == 'PROP' && activeName == 'down')"
            type="text"
            @click="viewResponseDetail(scope.$index, scope.row)"
          >响应详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page="query.pageNo"
        :page-size="query.limit"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @current-change="handlePageChange"
      />
    </div>
    <el-dialog title="" :visible.sync="contentShow" :modal="false">
      <pre>{{ content }}</pre>
    </el-dialog>
    <el-dialog title="" :visible.sync="responseShow" :modal="false">
      <pre>{{ replyMessage }}</pre>
    </el-dialog>

  </div>
</template>

<script>
import { deviceRtListApi, deviceSetListApi } from '../../../api/device'

export default {
  name: 'DeviceItemDataList',
  props: {
    funcType: String,
    deviceCode: String,
    productCode: String,
    show: Boolean,
    dlgName: String,
    upLabel: String,
    downLabel: String,
    downShow: true
  },
  data() {
    return {
      endDate: null,
      startDate: null,
      contentShow: false,
      tableData: [],
      content: '',
      dataType: '',
      identifier: '',
      unit: '',
      responseShow: false,
      replyMessage: '',
      query: {
        paramData: {
          productCode: this.productCode,
          deviceCode: this.deviceCode,
          funcType: this.funcType,
          startDate: this.startDate,
          endDate: this.endDate,
          identifier: this.identifier,
          dataType: this.dataType
        },
        pageNo: 1,
        limit: 10
      },
      total: 0,
      activeName: 'up'
    }
  },
  methods: {
    search() {
      this.query.paramData.endDate = this.endDate
      this.query.paramData.startDate = this.startDate
      this.tableData = []
      if (this.activeName == 'up') {
        deviceRtListApi(this.query).then((data) => {
          const retValue = data.data
          this.tableData = retValue.resultData
          this.total = retValue.total
        })
      } else if (this.activeName == 'down') {
        deviceSetListApi(this.query).then((data) => {
          const retValue = data.data
          this.tableData = retValue.resultData
          this.total = retValue.total
        })
      }
    },

    formatStatus(row, column) {
      const value = row.status
      if (value == 200) {
        return '成功'
      } else if (value == 201) {
        return '失败'
      } else if (value == 201) {
        return '未知错误'
      } else {
        return '暂未回执'
      }
    },
    formatReply(row, column) {
      let value = '' + row.replyMessage
      if (value.length > 30) {
        value = value.substr(0, 30) + '...'
      }
      return value
    },
    handleClick(item) {
      this.resetPageNo()
      this.search()
    },
    handlePageChange(val) {
      this.$set(this.query, 'pageNo', val)
      this.getData(this.dataType, this.identifier, this.unit)
    },
    viewDetail(index, row) {
      this.content = row.request
      this.contentShow = true
      this.startDate = null
      this.endDate = null
    },
    viewResponseDetail(index, row) {
      this.responseShow = true
      this.replyMessage = row.replyMessage
    },
    formatValue(row, column) {
      const dataType = this.dataType
      let value = row.request
      if (this.structArr.includes(dataType)) {
        value = JSON.stringify(row.request)
      }
      value = '' + value
      if (value.length > 30) {
        value = value.substr(0, 30) + '...'
      }
      value = this.unit == null ? value : value + this.unit
      return value
    },
    /** 重置分页到第一页*/
    resetPageNo() {
      this.$set(this.query, 'pageNo', 1)
    },
    getData(dataType, identifier, unit) {
      this.tableData = []
      this.query.paramData.identifier = identifier
      this.identifier = identifier
      this.dataType = dataType
      this.unit = unit
      this.query.paramData.dataType = dataType
      // this.activeName = 'up'
      // deviceRtListApi(this.query).then((data) => {
      //   const retValue = data.data;
      //   const { msg, code } = data;
      //   if (code !== 200) {
      //     this.$notify.error({
      //       title: "错误",
      //       message: msg,
      //     });
      //   } else {
      //     this.tableData = retValue.resultData;
      //     this.total = retValue.total;
      //   }
      // });
      this.search()
    }
  }
}
</script>

<style scoped>
</style>
